
import * as d3 from 'd3'

export function init(){
  // 获取父元素
  const d3Dom = d3.select('.d3_study')

  // 1、改变样式
  const h1Dom = d3Dom.select('h2')
  h1Dom.style('color','red')
    .style('font-size','18px')
    .style('font-weight','600')

  // 2、改变类名
  const h1Dom2 = d3Dom.select('h3')
  h1Dom2.classed('d_change_h2',true)

  // 3、批量改变dom元素内容
  const listDom = d3Dom.select('.d_text_list')
  listDom.selectAll('.d_text_item')
    .text('批量改变dom元素内容')

  // 4、添加dom元素
  const appendDivDom = d3Dom.select('.d_add_node')
  appendDivDom.append('p')
    .text('append添加的dom元素')
    .style('font-size','17px')
  appendDivDom.insert('p','p:first-child')
    .text('insert添加的dom元素')
    .style('font-size','17px')

  // 5、删除第二行dom元素
  const removeDom = d3Dom.select('.d_remove_list')
  const removeItemDom = removeDom.select('.d_remove_item:nth-child(2)')
  removeItemDom.remove()

  // 6、根据data添加真实dom
  d3Dom.select('.d_add_dom')
    .selectAll('li')
    .data(['第一个','第二个','第三个','第四个'])
    .enter()
    .append('li')
    .text((d,index)=>{
      return index+1+'、'+d+'个元素'
    })

  // 7、根据data删除多余dom
  d3Dom.select('.d_remove_dom')
    .selectAll('li')
    .data(['第一个','第二个'])
    .text((d,index)=>{
      return index+1+'、'+d+'个元素'
    })
    .exit()
    .remove()
}
